import { View, Text, ScrollView } from '@tarojs/components'
import { observer } from 'mobx-react'
import Taro from '@tarojs/taro'
import { AtTabs, AtTabsPane } from 'taro-ui'
import { useState } from 'react'
import styles from './index.less';
import { DietTab } from './components/DietTab';
import { ExerciseTab } from './components/ExerciseTab';
import { recordStore } from '@/store'

import type { Record } from '../../../types';

interface AddRecord {

  category: '1' | '2';  // 记录类型：饮食或运动
  title: string;              // 活动名称
  content: string;      // 描述
  // status: 'planned' | 'completed';  // 状态：计划中/已完成
  images?: string[];         // 图片URL
  date: string;             // 日期
  mood: string;             // 心情
  time: string;             // 时间
}

const emojiList = ['😊', '😎', '😐', '😢', '😖'];

const typeList = [
  {
    value: 1,
    label: '锻炼'
  },
  {
    value: 2,
    label: '饮食'
  }
];

const AddRecord = observer(() => {

  const [current, setCurrent] = useState(0)
  const [formData, setFormData] = useState<AddRecord>({
    category: '2', // 1:锻炼 2:饮食 默认为饮食
    title: '',
    content: '',
    images: [],
    date: new Date().toISOString().split('T')[0],
    mood: '😊',
    time: '',
  })


  const handleImageUpload = async () => {
    try {
      const res = await Taro.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera']
      })
      setFormData(prev => ({
        ...prev,
        imageUrl: res.tempFilePaths[0]
      }))
    } catch (error) {
      Taro.showToast({
        title: '图片选择失败',
        icon: 'none'
      })
    }
  }

  const handleMoodChange = (mood) => {
    setFormData(prev => ({ ...prev, mood }));
  };

  const requestAdd = async () => {

    recordStore.addRecord(formData);

  }

  const handleSubmit = () => {
    console.log(formData, 'formData');

    if (!formData.title) {
      Taro.showToast({
        title: '请输入名称',
        icon: 'none'
      })
      return
    }

    Taro.showModal({
      title: '提示',
      content: '确定要保存吗？',
      success: (res) => {
        if (res.confirm) {
          // 调用保存接口
          // ...
        }
      }
    })

    // Taro.showToast({
    //   title: '添加成功',
    //   icon: 'success',
    //   duration: 1500,
    //   complete: () => {
    //     setTimeout(() => {
    //       Taro.navigateBack()
    //     }, 1500)
    //   }
    // })
  }

  const clickTab = (value) => {

    if (value === 0) {
      setFormData(prev => ({ ...prev, type: '2' }))
    } else if (value === 1) {
      setFormData(prev => ({ ...prev, type: '1' }))
    }

    setCurrent(value)
  }

  const tabList = [{ title: '饮食' }, { title: '锻炼' }]

  return (
    <View className={styles.addRecord}>
      <ScrollView scrollY className={styles.scrollView} scrollAnchoring scrollWithAnimation>
        <View className={styles.moodCard}>
          <Text className={styles.moodLabel}>选择心情</Text>
          <View className={styles.emojiContainer}>

            {emojiList.map((emoji) => (
              <View
                key={emoji}
                className={`${styles.emoji} ${formData.mood === emoji ? styles.selected : ''}`}
                onClick={() => handleMoodChange(emoji)}
              >
                <Text className={styles.emojiText}>{emoji}</Text>
              </View>
            ))}


          </View>
        </View>
        <View className={styles.form}>
          <AtTabs current={current} tabList={tabList} animated={false} onClick={clickTab}>
            <AtTabsPane current={current} index={0} >
              <View >
                <DietTab formData={formData} setFormData={setFormData} />
              </View>
            </AtTabsPane>
            <AtTabsPane current={current} index={1}>
              <View >
                <ExerciseTab formData={formData} setFormData={setFormData} />
              </View>
            </AtTabsPane>

          </AtTabs>
        </View>
        <View style={{ height: 100 }}></View>
      </ScrollView>
      <View className={styles.submitButton} onClick={handleSubmit}>
        保存
      </View>
    </View>
  )
})

export default AddRecord